<template>
  <div id='abc'>
    <h1>vue+router</h1>
    <!-- 两种页面跳转的方式 -->
    <!-- routerlink跳转写法1 -->
    <RouterLink to="/学生管理系统" class="routerlink">router页面跳转写法1</RouterLink>
    <!-- routerlink跳转写法2 -->
    <RouterLink :to="{ path: '/学生管理系统' }">页面跳转写法2</RouterLink>
    <!-- 写法2的第二种写法 -->
    <RouterLink :to="obj"></RouterLink>
    <!-- 写法3 -->
    <RouterLink :to="{ name: '学生管理系统' }">页面跳转写法3</RouterLink>
    <button @click="toRouterLink">button页面跳转</button>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vuerouter',
}
</script>

<script lang='ts' setup>
import router from '@/router';
import { ref } from 'vue';
//实现页面跳转
const toRouterLink = () => {
  router.push('/学生管理系统')
}
//写法2的第二种写法，将跳转路径封装成一个值
const obj = { path: '/学生管理系统' }
</script>

<style lang='scss'>
@use '@/assets/common.scss';

#abc {
  margin: 0 auto;
  text-align: center;
}

.routerlink {
  height: 20px;
  width: 150px;
  display: inline-block;
}
</style>
